<template>
  <BasicModal
    @register="registerModal"
    title="JS增强历史记录"
    :width="1200"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    defaultFullscreen
    @cancel="onCancel"
  >
    <template #footer>
      <a-button title="关闭" @click="onCancel" />
    </template>

    <template #default>
      <a-spin :spinning="confirmLoading">
        <a-layout>
          <a-layout-sider theme="light">
            <a-list bordered :dataSource="dataList" class="enhance-list">
              <template #header>
                <div>
                  <a-divider style="margin: 0" title="保存时间" />
                </div>
              </template>
              <template #renderItem>
                <a-list-item :class="activeIndex === item.index ? 'bg-blue' : ''">
                  <a @click="fullCode(item)">{{ getFormatDate(item.date) }}</a>
                </a-list-item>
              </template>
            </a-list>
          </a-layout-sider>
          <a-layout>
            <a-layout-content style="margin: 8px 8px; padding: 8px; background: #fff; minHeight: 280px; }">
              <JCodeEditor ref="codeEditorRef" , language="javascript" :fullScreen="true" :lineNumbers="false" :language-change="false" />
            </a-layout-content>
          </a-layout>
        </a-layout>
      </a-spin>
    </template>
  </BasicModal>
</template>
<script lang="ts">
  import { formatToDate } from '/@/utils/dateUtil';
  import { defineComponent, ref, nextTick } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { JCodeEditor } from '/@/components/Form';
  import '/@/store';
  import { defineStore } from 'pinia';
  import { createLocalStorage } from '/@/utils/cache';

  const ls = createLocalStorage();
  const ENHANCE_PRE = 'enhance_';
  const useEnhanceStore = defineStore({
    id: 'online-cgform-enhance',
    state: () => ({
      enhanceJs: {},
    }),
    getters: {},
    actions: {
      getEnhanceJs(code) {
        this.enhanceJs[code] = ls.get(ENHANCE_PRE + code);
        return this.enhanceJs[code];
      },
      addEnhanceJs(record) {
        if (!this.enhanceJs[record.code]) {
          this.enhanceJs[record.code] = [Object.assign({}, record)];
        } else {
          this.enhanceJs[record.code].push(Object.assign({}, record));
        }
        let enhanceJsArray = this.enhanceJs[record.code];
        while (enhanceJsArray.length > 16) {
          enhanceJsArray.shift();
        }
        ls.set(ENHANCE_PRE + record.code, enhanceJsArray);
      },
    },
  });

  //const EnhanceJsHistory = defineComponent({

  export default defineComponent({
    name: 'EnhanceJsHistory',
    components: { BasicModal, JCodeEditor },
    setup() {
      const enhanceStore = useEnhanceStore();
      const codeEditorRef = ref();
      const confirmLoading = ref(false);
      const dataList = ref([]);
      const jsStr = ref('');
      const activeIndex = ref(0);
      const [registerModal, { closeModal }] = useModalInner(async (data) => {
        show(data.code, data.type);
      });
      function show(code, type) {
        jsStr.value = '';
        dataList.value = [];
        let arr = enhanceStore.getEnhanceJs(code);
        let ls2 = [];
        let index = 0;
        for (let item of arr) {
          if (item.type === type) {
            index++;
            ls2.push(Object.assign({}, item, { index }));
          }
        }
        if (ls2 && ls2.length > 0) {
          ls2.sort((a, b) => {
            return b.date - a.date;
          });
        }
        dataList.value = [...ls2];
        nextTick(() => fullCode(ls2[0]));
      }
      function onCancel() {
        closeModal();
      }
      function getFormatDate(date) {
        return formatToDate(date, 'yyyy-MM-DD HH:mm:ss');
      }
      function fullCode(item) {
        activeIndex.value = item.index;
        codeEditorRef.value.setValue(item.str);
      }
      return {
        codeEditorRef,
        fullCode,
        registerModal,
        getFormatDate,
        onCancel,
        confirmLoading,
        dataList,
        jsStr,
        activeIndex,
      };
    },
  });

  export { useEnhanceStore };
</script>
<style scoped>
  .enhance-list .ant-list-items .ant-list-item {
    position: relative;
    height: 42px;
    line-height: 42px;
    transition: background-color 0.3s;
  }

  .enhance-list .ant-list-items .bg-blue {
    background-color: '#2db7f5';
  }

  .enhance-list .ant-list-items .bg-blue a {
    color: #fff;
  }

  .enhance-list .ant-list-items a {
    color: #000000d9;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .enhance-list .ant-list-header {
    color: #000;
    padding-top: 5px;
    padding-bottom: 5px;
  }
</style>
